<template>
  <div class="container">
    <headerBar :title="local.chooseProduct" @changeLan="changeLan" :isNoReturn="true"></headerBar>
    <div class="all" :style="{ paddingTop: pdt + 'px' }">
      <div class="page__bd" style="width: 100%;">
        <div class="weui-search-bar">
          <div class="weui-search-bar__form">
            <div class="weui-search-bar__box">
              <input
                type="search"
                class="weui-search-bar__input"
                v-model="inputVal"
                :placeholder="local.searchsupplierandstockno"
                @confirm="inputTyping"
              />
              <div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">
                <icon type="clear" size="14"></icon>
              </div>
              <span
                style=";position:absolute;right: 11px;bottom: 2px;"
                :hidden="!inputShowed"
                @click="hideInput"
              ></span>
            </div>
            <label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">
              <icon class="weui-icon-search" type="search" size="14"></icon>
              <div class="weui-search-bar__text">{{local.search}}</div>
            </label>
          </div>
          <div
            class="weui-search-bar__cancel-btn"
            :hidden="!inputShowed"
            @click="inputTyping"
          >{{local.search}}</div>
        </div>
      </div>
      <div class="filter">
        <div class="filter-left">
          <div>{{ local.screen }}：</div>
          <div class="screen" @click="openDialogRight">{{ local.time }}</div>
          <div>|</div>
          <div @click="openDialogRight">{{ local.supplier }}</div>
          <div>|</div>
          <div class="screen" @click="openDialog">{{ local.warehouse }}</div>
        </div>
        <div class="clear-filter screen" @click="clearChoose">{{ local.clearfilter }}</div>
      </div>
      <template v-if="outStockControl.length == 0">
        <div class="stock-in-record nodata-wrap">
          <img src="/static/style/block.png" class="nodata-img" />
          <p class="nodata-txt">{{ local.nodata }}</p>
        </div>
      </template>
      <div v-else class="stock-in-list">
        <div
          class="stock-in-record"
          @click="
            routerToUrl(
              '/packageA/pages/continueSplitting/index?id=' + item.id + '&pages=2'
            )
          "
          v-for="(item, i) in outStockControl"
          :key="i"
        >
          <div class="record-warehouse">
            <span :class="lang == 'zh'||lang =='zh_CN'?'w_75':'w_110'">{{ local.stockNumber }}：</span>
            <div>{{ item.code }}</div>
          </div>
          <div class="record-supplier">
            <span :class="lang == 'zh'||lang =='zh_CN'?'w_75':'w_110'">{{ local.supplier }}：</span>
            <div>{{ item.supplierName }} ({{item.supplierCode}})</div>
          </div>
          <div class="record-supplier">
            <span :class="lang == 'zh'||lang =='zh_CN'?'w_75':'w_110'">{{ local.buyArea }}：</span>
            <div>{{ item.buyAreaName || ''}}</div>
          </div>
          <div class="record-goods">
            <span :class="lang == 'zh'||lang =='zh_CN'?'w_75':'w_110'">{{ local.goodsName }}：</span>
            <div>{{ item.goodsName }}</div>
          </div>
          <div class="record-warehouse">
            <span :class="lang == 'zh'||lang =='zh_CN'?'w_75':'w_110'">{{ local.warehouseName }}：</span>
            <div>{{ item.warehouseName }}</div>
          </div>
          <div class="record-warehouse">
            <span :class="lang == 'zh'||lang =='zh_CN'?'w_75':'w_110'">{{ local.storageTime }}：</span>
            <div>{{ item.createTime }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal" v-if="modalFlag" catchtouchmove="true">
      <div style="width: 100%; height: 100%;" @click="modalFlag = false"></div>
      <div class="dialog" scroll-y="true" style="border-radius: 9px;">
        <div class="header">
          {{ local.selectWarehouse }}
          <div class="text">{{ selected }}</div>
        </div>
        <div class="containera">
          <scroll-view style="height: 100%;" scroll-y="true">
            <div
              v-for="(item, index) in warehouseList"
              :key="index"
              class="ware-item"
              @click="changeColor(item, index)"
            >
              <div class="ware-item-left">
                <div class="num">{{ index + 1 }}</div>
                <div class="name">{{ item.warehouseName }}</div>
              </div>
              <i class="iconfont iconselect1" :style="item.selected ? 'color:#5AC8FA' : ''"></i>
            </div>
          </scroll-view>
        </div>
        <div class="bottom" @click="searchBytip()">{{ local.confirm }}</div>
      </div>
    </div>
    <div class="modalRight" v-if="modalFlagRight" catchtouchmove="true">
      <div style="width: 100%; height: 100%;" @click="modalFlagRight = false"></div>
      <div class="dialog">
        <div class="tip-name">{{ local.goodsName }}:</div>
        <input v-model="code" :placeholder="local.peleaseEnter" />
        <div class="tip-name">{{ local.selectSupplier }}:</div>
        <input
          @click="supplierHandler()"
          v-model="mydata.name"
          disabled="‘disabled’"
          :placeholder="local.option"
        />
        <div class="tip-name">{{ local.selectTime }}:</div>
        <picker
          class="weui-btn flex"
          mode="date"
          :value="startTime"
          start="1999-01-01"
          end="2099-01-01"
          @change="DateChange"
        >
          <input v-model="startTimeFormat" disabled="‘disabled’" :placeholder="local.option" />
        </picker>
        <div class="tip-name">-</div>
        <picker
          class="weui-btn flex"
          mode="date"
          :value="endTime"
          start="1999-01-01"
          end="2099-01-01"
          @change="DateChangeEnd"
        >
          <input v-model="endTimeFormat" disabled="‘disabled’" :placeholder="local.option" />
        </picker>
        <div class="btn">
          <div class="cancel-btn" @click="closeDialogRight">{{ local.cancel }}</div>
          <div class="confirm-btn" @click="searchBytip()">{{ local.confirm }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { formatTime } from '@/utils/index'
import { formatDate, filterParams } from '@/utils/index'
import card from '@/components/card'
import home from '@/api/home'
import headerBar from '@/components/headerBar'
export default {
  components: {
    card,
    headerBar
  },
  computed: {
    selected() {
      return this.warehouseList
        .filter(item => item.selected)
        .reduce((prv, next) => `${prv}${next.warehouseName},`, '已选择仓库:')
    },
    startTimeFormat(){
      return this.startTime ? wx.$timeFormat(this.startTime) : '' //new Date(this.startTime).$format('dd/MM/yyyy') : ''
    },
    endTimeFormat(){
      return this.endTime ? wx.$timeFormat(this.endTime) : '' //new Date(this.endTime).$format('dd/MM/yyyy') : ''
    }
  },
  onLoad() {
    this.initLang()
    var myDate = new Date()
    this.startTime = '' //formatDate(myDate, 'YYYY-MM-DD')
    this.endTime = '' //formatDate(myDate, 'YYYY-MM-DD')
    home.getWarehouseList().then(res => {
      this.warehouseList = res.rows
    })
    this.resetPage()
    this.getSplitList()
    this.pdt = this.globalData.CustomBar
  },
  onShow() {
    this.initLang()
    this.initMyData()
  },
  methods: {
    initLang(){
      this.local = wx.getStorageSync('local')
      this.lang = wx.getStorageSync('lang')
    },
    resetPage(){
      this.pageNum = 1
      this.pageSize = 7
    },
    supplierHandler() {
      // 跳转到 供应商列表
      wx.navigateTo({
        url: `../../pages/selectSupplier/index?name=supplier`
      })
    },

    changeColor(item, index) {
      this.warehouseList.forEach(element => {
        if (element.warehouseId == item.warehouseId) {
          element.selected = true
          this.warehouseId = element.warehouseId
          return
        }
        element.selected = false
      })
      this.warehouseList.push()
    },
    initMyData() {
      var pages = getCurrentPages()
      var currPage = pages[pages.length - 1] //当前页面
      let myData = currPage.data.mydata
      this.mydata.id = myData ? myData.id : ''
      this.mydata.name = myData ? myData.name : ''
    },
    // 清空搜索条件
    clearChoose() {
      this.startTime = ''
      this.endTime = ''
      this.code = ''
      this.supplierId = ''
      this.pageSize = 7
      this.pageNum = 1
      this.getSplitList()
    },
    openDialogRight() {
      this.modalFlagRight = true
    },
    closeDialogRight() {
      this.modalFlagRight = false
    },
    async searchBytip() {
      // 这里面是查询, 供应商选择需要跳转到新的客户选择
      this.modalFlagRight = false
      this.modalFlag = false
      let params = {
        key: this.code,
        startTime: this.startTime,
        endTime: this.endTime,
        supplierId: this.mydata.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderByColumn: 'updateTime',
        isAsc: 'desc',
        warehouseId: this.warehouseId
      }
      let objParams = filterParams(params)
      wx.showLoading({title: this.local.loading})
      home.getSplitList(objParams).then(res => {
        wx.hideLoading()
        const { rows, code ,msg} = res
        this.modalFlagRight = false
        if(code != 0){
          wx.showToast({
            title: msg || 'error',
            icon: 'none',
            duration: 2000
          })
          return
        }
        this.outStockControl = rows
        this.outStockControl.forEach(item=>{
          item.createTime = wx.$timeFormat(item.createTime,'time')  //new Date(item.createTime).$format('dd/MM/yyyy hh:ss')
        })
      })
      
    },
    changeLan (val, lang) {
      this.local = val
      this.lang = lang
    },

    async getBelt() {
      const { rows } = await home.getBeltLevel({ dictType: 'beltType' })
      this.arrayBelt = rows
    },
    async getSplitList() {
       wx.showLoading({title: this.local.loading})
      home.getSplitList({
        key: this.inputVal,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderByColumn: 'updateTime',
        isAsc: 'desc'
      }).then(res => {
        wx.hideLoading()
        this.modalFlagRight = false
        let { rows, code, total } = res
        this.total = total

        rows.forEach(item=>{
          item.createTime = wx.$timeFormat(item.createTime,'time') //new Date(item.createTime).$format('dd/MM/yyyy hh:ss')
        })
        if (this.pageNum == 1) {
          this.outStockControl = rows
        } else {
          this.outStockControl = this.outStockControl.concat(rows)
        }
      }) 
    },
    openDialog() {
      this.modalFlag = true
    },
    closeDialog() {
      this.modalFlag = false
    },
    routerToUrl(url) {
      wx.navigateTo({
        url
      })
    },
    TimeChange(e) {
    },
    chooseBelt(e) {
      this.indexBeltPicker = e.mp.detail.value
      this.beltType = this.arrayBelt[e.mp.detail.value].dictValue
    },
    DateChange(e) {
      this.startTime = e.mp.detail.value
    },
    DateChangeEnd(e) {
      this.endTime = e.mp.detail.value
    },
    showInput() {
      this.inputShowed = true
    },
    hideInput() {
      this.inputVal = ''
      this.inputShowed = false
    },
    clearInput() {
      this.inputVal = ''
    },
    inputTyping(e) {
      // this.inputVal = e.mp.detail.value
      this.getSplitList()
    }
  },
  async onReachBottom() {
    if (
      this.pageNum < parseInt((this.total + this.pageSize - 1) / this.pageSize)
    ) {
      // 如果当前页面小于最后一页
      this.pageNum = this.pageNum + 1 // 把当前页面，变成下一页面的页面数
      this.getSplitList() // 进行对后台数据的请求
    } else {
      wx.showToast({
        // 如果当前页面处于最后一页，就提示没有数据了
        title: '没有更多了',
        icon: 'none',
        duration: 2000
      })
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.pageNum = 1 // 只请求第一页面的列表数据
    this.getSplitList() // 进行数据的请求
    wx.stopPullDownRefresh() // 停止下拉刷新
  },
  onUnLoad() {
    this.pageNum = 1
    this.pageSize = 7
    this.lastPage = 100
    this.nextPage = 1
  },
  data() {
    return {
      code: '',
      lang: wx.getStorageSync('lang'),
      warehouseId: '',
      warehouseList: [], //仓库列表
      mydata: {
        id: '',
        name: ''
      },
      total: 0,
      supplierId: '',
      indexBeltPicker: 1,
      arrayBelt: ['122', '128', '125', '126', '127'],
      startTime: '',
      endTime: '',
      beltType: '',
      modalFlagRight: false,
      pdt: 66,
      local: wx.getStorageSync('local'),
      key: '',
      pageNum: 1,
      pageSize: 7,
      lastPage: 100,
      nextPage: 1,
      outStockControl: [],
      modalFlag: false,
      inputShowed: false,
      inputVal: '',
      time: '12:01'
    }
  },

  created() {}
}
</script>

<style scoped lang="scss">
@import 'index';
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.log-item {
  margin: 10rpx;
}
</style>
